fix: HeaderConfig
impacts layout of Screen
's contents
#2395
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes headerConfig's incorrect layout with custom subviews after recent changes in #2325.
Note
@kkafar:
Previously, before #2325, all children of the headerConfig component have been positioned absolutely, thus the headerConfig was always of height 0, not impacting layout of other components. After #2325, headerConfig's children are positioned using flexbox. This implies that it has no longer height of 0, thus it impacts the layout of other other elements, in particular
ScreenContentWrapper
, which is offset by the height of the highest header config subview.The initial idea to solve this was to set
height: 0; overflow: visible
, however, for some yet unknown reason the subviews become invisible with such styles set of headerConfig. Note that if you set theheight: 1
it works as expected.Due to above hindrance we decided to position the headerConfig approximately at the position of native header, by setting
top: -100%
. To prevent the headerConfig from blocking gestures we setpointerEvents: 'box-none'
.In the end I want to note, that it would be best if we came out with solution that excludes headerConfig from layout as it was before #2325.
Changes
Test2395.tsx
reproScreenshots / GIFs
Before
After
Test code and steps to reproduce
Test2395.tsx
reproChecklist